<template>
  <div>
    <postDetailHeader :post="post" />

    <div class="mainContent">
      <video
        v-if="post.type == 2"
        controls="controls"
        class="video"
        :poster="post.cover[0].url"
        src="https://video.pearvideo.com/mp4/adshort/20191101/cont-1618485-14548793_adpkg-ad_hd.mp4"
      />
      <div class="title">{{post.title}}</div>
      <div class="info" v-if="post.user">
        {{post.user.nickname}}
        2019-11-11
      </div>

      <div class="content" v-html="post.content" v-if="post.type != 2"></div>

      <div class="actionBtns">
        <div class="like Common" @click="like">
          <span class="iconfont icondianzan" :class="{
            red:post.has_like
          }"></span>
          {{post.like_length}}
        </div>
        <div class="wechat Common">
          <span class="iconfont iconweixin"></span>
          <a
            href="https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Explanation_of_interface_privileges.html"
          >微信</a>
        </div>
      </div>
    </div>

    <div class="comments">
      <h2 class="comments_title">精彩跟帖</h2>
      <!-- 评论空状态 -->
      <div class="emptyComment" v-if="comments.length==0">暂无跟帖，抢占沙发</div>
      <div class="comment" v-else>
        <comment :commentItem="item" v-for="(item,index) in comments" :key="index" />
        <div class="btnMoreComments" @click="toMoreComments">
          更多跟贴
        </div>
      </div>
    </div>

    <postDetailFooter :post="post" @newComment='getComments' />
  </div>
</template>

<script>
import postDetailHeader from "../components/postDetailHeader";
import postDetailFooter from "../components/postDetailFooter";
// 引入评论组件
import comment from "../components/comment";
export default {
  components: {
    postDetailHeader,
    postDetailFooter,
    comment
  },
  data() {
    return {
      postId: this.$route.params.id,
      post: {},
      comments: []
    };
  },
  methods: {
    like() {
      this.$axios({
        url: "/post_like/" + this.post.id,
        method: "get"
      }).then(res => {
        const { message } = res.data;
        console.log(message);
        if (message == "点赞成功") {
          this.post.has_like = true;
          this.post.like_length += 1;
        } else if (message == "取消成功") {
          this.post.has_like = false;
          this.post.like_length -= 1;
        }
      });
    },

    getComments() {
      // 发送ajax获取评论列表
      this.$axios({
        url: "/post_comment/" + this.postId,
        method: "get",
        params:{
          pageSize :3
        }
        
      }).then(res => {
        const { data } = res.data;
        console.log(data);

        this.comments = data;
      });
    },
    toMoreComments(){
    // 点击更多跟帖
    this.$router.push({
      name:'MoreCommentsPage',
        params:{
          id:this.postId
        }
    })
  }
  },
  mounted() {
    this.$axios({
      url: "/post/" + this.postId,
      method: "get"
    }).then(res => {
      console.log(this.postId);

      const { data } = res.data;
      this.post = data;
      console.log(this.post);
    });
    //    调用函数获取回复数据
    this.getComments();
  },
  
};
</script>
<style lang="less" scoped>
.mainContent {
  padding: 2.778vw;
}
.title {
  font-size: 5.556vw;
  color: #333;
}
.info {
  margin: 5.556vw;
}
.content {
  padding-bottom: 16.667vw;
  /deep/ img {
    max-width: 100%;
  }
}
.video {
  width: 100%;
}

.actionBtns {
  font-size: 18px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 5.556vw 0;
  .Common {
    border: 1px solid #333;
    padding: 4px 12px;
    border-radius: 30px;
  }
  .iconfont {
    font-size: 20px;
  }
  .iconweixin {
    color: #0f0;
  }
 
}
.red {
  color: #f00;
}
.comments {
  border-top: 5px solid #e4e4e4;
  padding-bottom: 22.222vw;
  align-items: center;
  .comments_title {
    font-size: 22px;
    font-weight: 400;
    text-align: center;
    margin: 30px 0;
  }
  .emptyComment {
    display: flex;
    justify-content: center;
    color: #aeaeae;
  }
    .btnMoreComments {
        line-height: 8.333vw;
        text-align: center;
        border: 1px solid #333;
        width: 33.333vw;
        border-radius: 4.167vw;
        margin: 8.333vw auto 0;
    }
}
</style>